<template>
  <div class="user">
      <H1>我的</H1>
      <div class="login">
          <van-image
            round
            width=".5rem"
            height=".5rem"
            fit="cover"
            src="https://img.yzcdn.cn/vant/cat.jpeg"
            />
            <div class="username">
                <h3>昵称</h3>
                <span>个性签名</span>
            </div>
      </div>
      <div class="order">
          <div class="order-l">
            <i class="iconfont icon-xinbaniconshangchuan-"></i>
            <span>商品订单</span>
          </div>
          <div class="order-r">
            <span>查看全部</span>
            <i class="iconfont icon-jiantou"></i>
          </div>
      </div>
      <div class="divider"></div>
      <ul class="orderstatus">
          <li>
            <i class="iconfont icon-daifukuan"></i>
            <span>待付款</span>
          </li>
          <li>
            <i class="iconfont icon-31daifahuo"></i>
            <span>待发货</span>
          </li>
          <li>
            <i class="iconfont icon-xiaohuoche"></i>
            <span>运输中</span>
          </li>
          <li>
            <i class="iconfont icon-wancheng"></i>
            <span>已完成</span>
          </li>
      </ul>
      <div class="list">
          <ul>
              <li>
                  <p>我的足迹</p>
                  <i class="iconfont icon-jiantou"></i>
              </li>
              <li>
                  <p>我的地址</p>
                  <i class="iconfont icon-jiantou"></i>
              </li>
              <li>
                  <p>我的售后</p>
                  <i class="iconfont icon-jiantou"></i>
              </li>
              <li>
                  <p>联系客服</p>
                  <i class="iconfont icon-jiantou"></i>
              </li>
          </ul>
      </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Image as VanImage } from 'vant'

Vue.use(VanImage)
export default {
}
</script>

<style lang="scss" scoped>
.user{
     padding: .12rem;
}
h1{
    margin-top: .12rem;
}
.divider {
    height:.005rem;
    background-color: #1D1E2C;
    opacity: .3;
    margin: .1rem auto;
}
.order {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .order-l {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: .14rem;
        color: #1D1E2C;
        span {
            margin-left: .04rem;
        }
        i{
            font-size: .2rem;
        }
    }
    .order-r {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: .13rem;
        color: rgb(109, 109, 109);
        span {
            margin-left: .051rem;
        }
    }
}
.login {
    height:.8rem;
    background-color: #1D1E2C;
    margin: .24rem 0;
    border-radius: .06rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .van-image{
        margin-left: .15rem;
    }
    .username {
        color: #fff;
        display: inline-block;
        margin-left:.2rem;
    }
}
.orderstatus {
    margin: .15rem .1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    li {
        display: flex;
        flex-direction: column;
        align-items: center;
        i{
            font-size: .24rem;
        }
        span {
            font-size: .13rem;
            margin-top: .02rem;
        }
    }
}
.list{
    margin-top:.2rem;
    ul{
        font-size: .13rem;
        li{
            border-bottom: .005rem solid #e5e5e5;
            height:.49rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            i{
                opacity: .7;
            }
        }
    }
}
</style>
